<template>
    <a-form-item v-if="item.view===DateTypeEnum.Date" :labelCol="labelCol" :class="'jeecg-online-search'" >
        <template #label>
            <span :title="item.label" class="label-text">{{ item.label }}</span>
        </template>
        <template v-if="single_mode===item.mode">
            <a-date-picker :showTime="false" valueFormat="YYYY-MM-DD" :placeholder=" '请选择'+item.label " v-model:value="queryParam[item.field]"></a-date-picker>
        </template>
        <template v-else>
            <a-date-picker :showTime="false" valueFormat="YYYY-MM-DD" placeholder="开始日期" v-model:value="queryParam[item.field+'_begin']" style="width: calc(50% - 15px);"></a-date-picker>
            <span class="group-query-strig">~</span>
            <a-date-picker :showTime="false" valueFormat="YYYY-MM-DD" placeholder="结束日期" v-model:value="queryParam[item.field+'_end']" style="width: calc(50% - 15px);"></a-date-picker>
        </template>
    </a-form-item>

    <a-form-item v-else-if="item.view===DateTypeEnum.Datetime" :labelCol="labelCol" :class="'jeecg-online-search'">
        <template #label :title="item.label">
            <span :title="item.label" class="label-text">{{ item.label }}</span>
        </template>
        <template v-if="single_mode===item.mode">
            <a-date-picker :placeholder=" '请选择'+item.label " :show-time="true" valueFormat="YYYY-MM-DD HH:mm:ss" v-model:value="queryParam[item.field]"></a-date-picker>
        </template>
        <template v-else>
            <a-date-picker placeholder="1选择开始时间" :show-time="true" valueFormat="YYYY-MM-DD HH:mm:ss" v-model:value="queryParam[item.field+'_begin']" style="width: calc(50% - 9px);min-width: 60px;"></a-date-picker>
            <span class="group-query-strig" style="width: auto;padding: 0 4px;">~</span>
            <a-date-picker placeholder="2选择结束时间" :show-time="true" valueFormat="YYYY-MM-DD HH:mm:ss" v-model:value="queryParam[item.field+'_end']" style="width: calc(50% - 9px);min-width: 60px;"></a-date-picker>
        </template>
    </a-form-item>

    <a-form-item v-else-if="item.view===DateTypeEnum.Time" :labelCol="labelCol" :class="'jeecg-online-search'">
        <template #label>
            <span :title="item.label" class="label-text">{{ item.label }}</span>
        </template>
        <template v-if="single_mode===item.mode">
            <a-date-picker :placeholder=" '请选择'+item.label " mode="time" valueFormat="HH:mm:ss" v-model:value="queryParam[item.field]"></a-date-picker>
        </template>
        <template v-else>
            <a-date-picker placeholder="请选择开始时间" mode="time" valueFormat="HH:mm:ss" v-model:value="queryParam[item.field+'_begin']" style="width: calc(50% - 15px);"></a-date-picker>
            <span class="group-query-strig">~</span>
            <a-date-picker placeholder="请选择结束时间" mode="time" valueFormat="HH:mm:ss" v-model:value="queryParam[item.field+'_end']" style="width: calc(50% - 15px);"></a-date-picker>
        </template>
    </a-form-item>

    <a-form-item v-else-if=" item.view===CompTypeEnum.List || item.view===CompTypeEnum.Radio || item.view===CompTypeEnum.Switch" :labelCol="labelCol" :class="'jeecg-online-search'">
        <template #label>
            <span :title="item.label" class="label-text">{{ item.label }}</span>
        </template>
        <JDictSelectTag
                v-if="item.config==='1'"
                :placeholder=" '请选择'+item.label "
                v-model="queryParam[item.field]"
                :dictCode="getDictCode(item)">
        </JDictSelectTag>
        <a-select v-else :placeholder=" '请选择'+item.label " v-model:value="queryParam[item.field]">
            <template v-for="(obj,index) in dictOptions[getDictOptionKey(item)]" :key="index" >
                <a-select-option :value="obj.value"> {{ obj.text }}</a-select-option>
            </template>
        </a-select>
    </a-form-item>

    <a-form-item v-else-if=" item.view===CompTypeEnum.SelTree " :labelCol="labelCol" :class="'jeecg-online-search'">
        <template #label>
            <span :title="item.label" class="label-text">{{ item.label }}</span>
        </template>
        <JTreeSelect
                :placeholder=" '请选择'+item.label "
                v-model:value="queryParam[item.field]"
                :dict="item.dict"
                :pidField="item.pidField"
                :pidValue="item.pidValue"
                :hasChildField="item.hasChildField"
                load-triggle-change>
        </JTreeSelect>
    </a-form-item>

    <a-form-item v-else-if=" item.view===CompTypeEnum.CatTree " :labelCol="labelCol" :class="'jeecg-online-search'">
        <template #label>
            <span :title="item.label" class="label-text">{{ item.label }}</span>
        </template>
        <JCategorySelect :pcode="item.pcode" v-model:value="queryParam[item.field]" :placeholder=" '请选择'+item.label "/>
    </a-form-item>

    <a-form-item v-else-if=" item.view===CompTypeEnum.SelSearch" :labelCol="labelCol" :class="'jeecg-online-search'">
        <template #label>
            <span :title="item.label" class="label-text">{{ item.label }}</span>
        </template>
        <JDictSelectTag
                v-if="item.config==='1'"
                v-model:value="queryParam[item.field]"
                :placeholder=" '请选择'+item.label "
                :dict="getDictCode(item)">
        </JDictSelectTag>
        <!--TODO 新需要的组件-->
       <!-- <j-online-search-select
                v-else
                :ref="item.field+'_search'"
                v-model="queryParam[item.field]"
                :placeholder=" '请选择'+item.label "
                :sql="getSqlByDictCode(item)">
        </j-online-search-select>-->

    </a-form-item>

    <a-form-item v-else-if=" item.view===CompTypeEnum.SelUser" :labelCol="labelCol" :class="'jeecg-online-search'">
        <template #label>
            <span :title="item.label" class="label-text">{{ item.label }}</span>
        </template>
        <JSelectUserByDept v-model:value="queryParam[item.field]" :placeholder=" '请选择'+item.label " ></JSelectUserByDept>
    </a-form-item>

    <a-form-item v-else-if=" item.view==CompTypeEnum.SelDepart" :labelCol="labelCol" :class="'jeecg-online-search'">
        <template #label>
            <span :title="item.label" class="label-text">{{ item.label }}</span>
        </template>
        <JSelectDept v-model:value="queryParam[item.field]" :placeholder=" '请选择'+item.label "/>
    </a-form-item>

    <a-form-item v-else-if=" item.view===CompTypeEnum.Popup" :labelCol="labelCol" :class="'jeecg-online-search'">
        <template #label>
            <span :title="item.label" class="label-text">{{ item.label }}</span>
        </template>
        <JPopup
            :placeholder=" '请选择'+item.label "
            v-model:value="queryParam[item.field]"
            :formElRef="formElRef"
            :code="item.dictTable"
            :field-config="item.dictCode"
            :multi="true"/>
    </a-form-item>

    <a-form-item v-else-if=" item.view=== CompTypeEnum.Pca" :labelCol="labelCol" :class="'jeecg-online-search'">
        <template #label>
            <span :title="item.label" class="label-text">{{ item.label }}</span>
        </template>
        <JAreaLinkage :placeholder=" '请选择'+item.label " v-model:value="queryParam[item.field]"/>
    </a-form-item>
    <!--TODO 缺少的组件-->
    <a-form-item v-else-if=" item.view===CompTypeEnum.Checkbox || item.view===CompTypeEnum.ListMulti" :labelCol="labelCol" :label="item.label" :class="'jeecg-online-search'">
       <!-- <j-select-multiple
                v-if="item.config==='1'"
                :placeholder=" '请选择'+item.label "
                v-model="queryParam[item.field]"
                :dictCode="getDictCode(item)">
        </j-select-multiple>
        <j-select-multiple
                v-else
                :placeholder=" '请选择'+item.label "
                :options="dictOptions[item.dbField]"
                v-model="queryParam[item.field]">
        </j-select-multiple>-->
    </a-form-item>

    <a-form-item v-else :labelCol="labelCol" :class="'jeecg-online-search'">
        <template #label>
            <span :title="item.label" class="label-text">{{ item.label }}</span>
        </template>
        <template v-if="single_mode===item.mode">
            <a-input :placeholder=" '请输入'+item.label " v-model:value="queryParam[item.field]"></a-input>
        </template>
        <template v-else>
            <a-input :placeholder=" '请输入开始'+item.label " v-model:value="queryParam[item.field+'_begin']" style="width: calc(50% - 15px);"></a-input>
            <span class="group-query-strig">~</span>
            <a-input :placeholder=" '请输入结束'+item.label " v-model:value="queryParam[item.field+'_end']" style="width: calc(50% - 15px);"></a-input>
        </template>
    </a-form-item>

</template>

<script lang="ts">
    //import JOnlineSearchSelect from '@/components/online/autoform/comp/JOnlineSearchSelect'
    import {defineComponent, ref} from 'vue';
    import {DateTypeEnum} from '/@/enums/DateTypeEnum.ts';
    import {CompTypeEnum} from '/@/enums/CompTypeEnum.ts';
    import {
        JDictSelectTag,
        JTreeSelect,
        JCategorySelect,
        JSelectUserByDept,
        JSelectDept,
        JPopup,
        JAreaLinkage
    } from '/@/components/Form'
    export default defineComponent({
        name: 'JPopupOnlReport',
        components: {
            //JOnlineSearchSelect
            JDictSelectTag,
            JTreeSelect,
            JCategorySelect,
            JSelectUserByDept,
            JSelectDept,
            JPopup,
            JAreaLinkage
        },
        props: {
            formElRef: {
                type: Object,
                default: () => {
                },
            },
            item: {
                type: Object,
                default: () => {
                },
                required: true
            },
            dictOptions: {
                type: Object,
                default: () => {
                },
                required: true
            },
            queryParam: {
                type: Object,
                default: () => {
                },
                required: true
            }
        },
        setup(props) {
            const single_mode = ref("single");
            console.log("dictOptions===>",props.dictOptions)
            function getDictCode(item) {
                if (item.dictTable && item.dictTable.length > 0) {
                    return item.dictTable + ',' + item.dictText + ',' + item.dictCode
                } else {
                    return item.dictCode
                }
            }

            function getSqlByDictCode(item) {
                let {dictTable, dictCode, dictText} = item;
                let temp = dictTable.toLowerCase();
                let arr = temp.split('where');
                let condition = '';
                if (arr.length > 1) {
                    condition = ' where' + arr[1]
                }
                let sql = "select " + dictCode + " as 'value', " + dictText + " as 'text' from " + arr[0] + condition;
                console.log('sql', sql);
                return sql;
            }

            function getDictOptionKey(item) {
                if(item.dbField){
                  return item.dbField
                }else{
                  return item.field
                }
            }

            // 定义查询条件 文本label的最大宽度 比起单纯的控制字体个数更好
            const labelTextMaxWidth = '120px'
            const labelCol = {
              style:{
                'max-width': labelTextMaxWidth
              }
            }
            return {labelTextMaxWidth, labelCol, single_mode,getDictOptionKey,getDictCode, getSqlByDictCode,DateTypeEnum,CompTypeEnum}
        }
    })

</script>

<style lang="less" scoped>
    .group-query-strig {
        width: 30px;
        text-align: center;
        display: inline-block;
    }

    /* 查询条件左对齐样式设置 */
    .jeecg-online-search ::v-deep .ant-form-item-label{
        flex: 0 0 auto !important;
        width: auto;
    }
    .jeecg-online-search ::v-deep .ant-form-item-control{
        max-width: 100%;
    }

    /* label显示宽度 超出显示... */
    .jeecg-online-search ::v-deep .label-text{
        max-width: v-bind(labelTextMaxWidth);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow-wrap: break-word;
    }
</style>
